<template>
    <p style="color: red ;">基础style</p>
    <!--动态的-->
    <p :style="{backgroundColor: colorStr}">动态style</p>
    <p :style="{color: colorStr, fontSize: fontSize,'backgroundColor': bgColor}">多个style样式</p>
    <!--已对象的形式进行抽取-->
    <p :style="styleObj">对象抽取样式</p>

</template>
<script>
export default {
    data() {
        return {
            //动态style  语法: :style="{css属性:值}"
            colorStr: "red",
            fontSize: "40px",
            bgColor: "pink",
            styleObj: {
                color: "red",
                fontSize: "40px",
                'backgroundColor' : 'pink'
            }
        };
    },
    methods: {}


};

</script>